<!--
 * @Author: your name
 * @Date: 2021-08-03 13:36:05
 * @LastEditTime: 2021-08-18 13:43:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \getHome (2)\src\components\discounts\amend.vue
-->
<!--优惠券配置-->
<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>优惠卷管理</el-breadcrumb-item>
        <el-breadcrumb-item>优惠券配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">优惠券配置</div>
      <div class="entirety">
        <p class="basic">基本信息</p>
        <div class="overall">
          <el-form ref="form" :model="form" label-width="110px">
            <el-form-item label="优惠券名称">
              <el-input
                style="color: #fc9e76;"
                type="text"
                placeholder="请输入优惠券名称"
                v-model="form.couponTitle"
                maxlength="10"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <el-form-item label="优惠券描述">
              <el-input
                style="color: #fc9e76;"
                type="text"
                placeholder="请输入优惠券描述"
                v-model="form.description"
                maxlength="30"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <el-form-item label="活动区域">
              <div class="radio">
                <el-radio v-model="useConditions" label="1">固定模式</el-radio>
                <el-radio v-model="useConditions" label="2"
                  >循环叠加模式</el-radio
                >
              </div>
              <div class="nei">
                <div v-show="useConditions == 1">
                  <p class="man">
                    满<el-input
                      v-model="form.thresholdAmount"
                      placeholder="输入金额"
                      style="width: 90px; margin-left: 2%"
                    ></el-input
                    >,减<el-input
                      v-model="form.discountAmount"
                      placeholder="输入金额"
                      style="width: 90px; margin-left: 2%"
                    ></el-input>
                  </p>
                </div>
                <div v-show="useConditions == 2">
                  <p class="man">
                    每满<el-input
                      v-model="form.thresholdAmount"
                      placeholder="输入金额"
                      style="width: 90px; margin-left: 2%"
                    ></el-input
                    >,减<el-input
                      v-model="form.discountAmount"
                      placeholder="输入金额"
                      style="width: 90px; margin-left: 2%"
                    ></el-input>
                  </p>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="活动时间">
              <div class="block">
                <el-date-picker
                  v-model="form.effectiveStartTime"
                  :disabled="isDisabled"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
                <el-date-picker
                  v-model="form.effectiveEndTime"
                  type="datetime"
                  :disabled="isDisabled"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="发放数量">
              <el-input
                v-model="form.sendQuantity"
                placeholder="输入数量"
              ></el-input>
            </el-form-item>
            <el-form-item label="限定使用场景">
              <el-radio v-model="radio" label="1">到家服务产品</el-radio>
            </el-form-item>
            <el-form-item label="优惠券适用范围">
              <div
                class="select"
                v-for="(item, index) in couponApplyAreaInsertDTOS"
                :key="index"
              >
                <el-select
                  v-model="item.cityCode"
                  placeholder="请选择"
                  size="small"
                  value-key="cityName"
                  class="choice"
                  @change="onSelectedCityList($event, index)"
                >
                  <el-option
                    :key="item1.cityCode"
                    :label="item1.cityName"
                    :value="item1.cityCode"
                    v-for="item1 in cityList"
                  >
                  </el-option>
                </el-select>

                <el-select
                  v-model="item.businessAreaCode"
                  placeholder="请选择"
                  size="small"
                  class="choice"
                >
                  <el-option
                    v-for="item2 in item.businessList"
                    :key="item2.areaCode"
                    :label="item2.areaName"
                    :value="item2.areaCode"
                  >
                  </el-option>
                </el-select>
                <div class="dialog-footer">
                  <el-button
                    v-if="index === 0"
                    style="background-color:#fd804c;color: #fff;"
                    @click="addCouponApplyAreaInsertDTOS"
                    size="small"
                    >新 增</el-button
                  >
                  <el-button
                    v-else
                    type="danger"
                    style="margin-top: 10px"
                    size="small"
                    @click="delCouponApplyAreaInsertDTOS(index)"
                    >删 除</el-button
                  >
                </div>
              </div>
            </el-form-item>
            <el-form-item label="可使用商品">
              <div class="big">
                <div class="useType">
                  <el-radio v-model="useType" label="1">按分类使用</el-radio>
                  <el-radio v-model="useType" label="2"
                    >按单个商品使用</el-radio
                  >
                </div>
                <div class="nei">
                  <div v-show="useType == 1">
                    <div
                      class="selects"
                      v-for="(item, index) in couponApplyClassifyInsertDTOS"
                      :key="index"
                    >
                      <el-select
                        v-model="item.subClassifyCode"
                        placeholder="请选择"
                        size="small"
                        class="choice"
                      >
                        <el-option
                          v-for="item in classifyList"
                          :key="item.classifyCode"
                          :label="item.classifyName"
                          :value="item.classifyCode"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        v-model="item.crafCode"
                        placeholder="请选择"
                        size="small"
                        class="choice"
                      >
                        <el-option
                          v-for="item in craftList"
                          :key="item.craftCode"
                          :label="item.craftName"
                          :value="item.craftCode"
                        >
                        </el-option>
                      </el-select>
                      <div class="dialog-footer">
                        <el-button
                          v-if="index === 0"
                          style="background-color:#fd804c;color: #fff;"
                          @click="addLocation"
                          size="small"
                          >新 增</el-button
                        >
                        <el-button
                          v-else
                          type="danger"
                          style="margin-top: 10px"
                          size="small"
                          @click="delLoaction(index)"
                          >删 除</el-button
                        >
                      </div>
                    </div>
                  </div>
                  <div v-show="useType == 2">
                    <div
                      class="selects"
                      v-for="(item, index) in couponApplyGoodsInsertDTOS"
                      :key="index"
                    >
                      <el-select
                        v-model="item.crafCode"
                        placeholder="请选择"
                        size="small"
                        class="choice"
                      >
                        <el-option
                          v-for="item in craftList"
                          :key="item.craftCode"
                          :label="item.craftName"
                          :value="item.craftCode"
                        >
                        </el-option>
                      </el-select>
                      <el-input
                        v-model="item.goodsCode"
                        placeholder="多个商品ID用逗号隔空"
                        size="small"
                        class="choice"
                      ></el-input>
                      <div class="dialog-footer">
                        <el-button
                          v-if="index === 0"
                          style="background-color:#fd804c;color: #fff;"
                          @click="addCouponApplyGoodsInsertDTOS"
                          size="small"
                          >新 增</el-button
                        >
                        <el-button
                          v-else
                          type="danger"
                          style="margin-top: 10px"
                          size="small"
                          @click="delCouponApplyGoodsInsertDTOS(index)"
                          >删 除</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                style="background-color:#fd804c;color: #fff;"
                @click="onSubmit"
                >立即创建</el-button
              >
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="cou"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: "1",
      isDisabled: false,
      useType: "1",
      useConditions: "1",
      text: "",
      form: {
        // 描述
        description: "",
        // 名称
        couponTitle: "",
        // 活动区域
        discountAmount: "",
        thresholdAmount: "",
        sendQuantity: "",
        // 日期时间
        effectiveStartTime: "",
        effectiveEndTime: ""
      },
      cityList: [],
      businessList: [],
      classifyList: [],
      craftList: [],
      isNum: "",
      textarea: "",
      couponNo: "",
      couponApplyAreas: "",
      couponApplyClassifyInsertDTOS: [
        {
          classifyCode: "",
          crafCode: "",
          subClassifyCode: ""
        }
      ],
      couponApplyGoodsInsertDTOS: [
        {
          crafCode: "",
          goodsCode: ""
        }
      ],
      routeArr: [],
      couponApplyAreaInsertDTOS: [
        {
          businessAreaCode: "",
          cityCode: ""
        }
      ]
    };
  },

  activated() {
    this.getBusinessNameCode();
    this.getSubClassifyList();
    this.getCraftList();

    if (Object.keys(this.$route.params).length === 0) {
      this.form = {};

      (this.cityList = []),
        (this.businessList = []),
        (this.classifyList = []),
        (this.craftList = []),
        (this.isNum = ""),
        (this.textarea = ""),
        (this.couponNo = ""),
        (this.couponApplyAreas = ""),
        (this.couponApplyClassifyInsertDTOS = [
          {
            classifyCode: "",
            crafCode: "",
            subClassifyCode: ""
          }
        ]),
        (this.couponApplyGoodsInsertDTOS = [
          {
            crafCode: "",
            goodsCode: ""
          }
        ]),
        (this.routeArr = []),
        (this.couponApplyAreaInsertDTOS = [
          {
            businessAreaCode: "",
            cityCode: ""
          }
        ]);
    } else {
      this.couponNo = this.$route.params.data.couponNo;
      this.getCouponTemplateDetail();
      this.isDisabled = true;
      // this.form = this.$route.params.data;
    }

    // //console.log(" this.form,,,,,,", this.$route);
    // //console.log(" this.couponNo,,,,,,", this.couponNo);
  },

  methods: {
    onSelectedCityList(e, index) {
      // console.log(e)
      //console.log(" this.couponNo,,,e,,,33", e);
      // this.couponApplyAreaInsertDTOS[index].businessAreaCode = "";
      // const cityData = this.cityList.find(item => {
      //   this.isNum = e;

      //   if (item.cityCode == this.isNum) {
      //     return item.cityCode == e; //筛选出匹配数据
      //   }
      // });

      // this.businessList = cityData.areas;

      // 更改城市操作
      this.couponApplyAreaInsertDTOS[index].businessAreaName = "";
      this.couponApplyAreaInsertDTOS[index].businessAreaCode = "";
      // e 变更的城市code
      this.couponApplyAreaInsertDTOS[index].businessList = this.cityList.find(
        item => {
          this.isNum = e;
          if (item.cityCode == this.isNum) {
            return item.cityCode == e; //筛选出匹配数据
          }
        }
      ).areas;
    },

    // 优惠券使用范围     再者就是 你这个顺序都没对应好 以后好好命名 这个下拉应该是最先写的怎么是 addCouponApplyAreaInsertDTOS
    addCouponApplyAreaInsertDTOS() {
      this.couponApplyAreaInsertDTOS.push({
        businessAreaCode: "",
        cityCode: ""
      });
    },
    delCouponApplyAreaInsertDTOS(ind) {
      this.couponApplyAreaInsertDTOS.splice(ind, 1);
    },

    // 优惠券 分页操作
    addLocation() {
      this.couponApplyClassifyInsertDTOS.push({
        classifyCode: "",
        crafCode: "",
        subClassifyCode: ""
      });
    },
    delLoaction(ind) {
      this.couponApplyClassifyInsertDTOS.splice(ind, 1);
    },

    // 优惠券商品操作
    addCouponApplyGoodsInsertDTOS() {
      this.couponApplyGoodsInsertDTOS.push({
        crafCode: "",
        goodsCode: ""
      });
    },
    delCouponApplyGoodsInsertDTOS(ind) {
      this.couponApplyGoodsInsertDTOS.splice(ind, 1);
    },
    onSubmit() {
      this.getList();
    },

    //商圈及城市列表
    getBusinessNameCode() {
      console.log(" this.couponNo ", this.couponNo);
      this.$http({
        url:
          this.$route.query.edit == "edit"
            ? "/hsssystemadmin//v1/businessManagement/getAllCityAreaList"
            : "/hsssystemadmin/v1/businessManagement/getCityAreaList",
        method: "GET"
      }).then(res => {
        this.cityList = res.data;
      });
    },

    //获取优惠券详细信息
    async getCouponTemplateDetail() {
      this.$http({
        url: `/couponadmin/v1/couponTemplate/getCouponTemplateDetail`,
        method: "GET",
        params: {
          couponNo: this.couponNo
        }
      }).then(async res => {
        this.form = res.data;
        this.useConditions = String(res.data.useConditions);

        if (res.data.couponApplyAreas.length === 0) {
          this.couponApplyAreaInsertDTOS;
        } else {
          this.couponApplyAreaInsertDTOS = res.data.couponApplyAreas;

          // 查询每个城市的商圈下拉列表
          let url = "";
          if (this.$route.query.edit == "edit") {
            url = "/hsssystemadmin//v1/businessManagement/getAllCityAreaList";
          } else {
            url = "/hsssystemadmin/v1/businessManagement/getCityAreaList";
          }
          const { data } = await this.$http({
            url,
            method: "get"
          });
          const getCityAreaList = data;
          if (getCityAreaList.length > 0) {
            this.couponApplyAreaInsertDTOS.forEach(item => {
              const findCityAndBusinessObj = getCityAreaList.find(
                item1 => item1.cityCode === item.cityCode
              );
              item.businessList = findCityAndBusinessObj.areas;
            });
          }
        }
        if (res.data.couponApplyClassifies.length === 0) {
          this.couponApplyClassifyInsertDTOS = [
            {
              classifyCode: "",
              crafCode: "",
              subClassifyCode: ""
            }
          ];
        } else {
          this.useType = "1";

          this.couponApplyClassifyInsertDTOS = res.data.couponApplyClassifies;
        }
        if (res.data.couponApplyGoods.length === 0) {
          this.couponApplyGoodsInsertDTOS = [
            {
              crafCode: "",
              goodsCode: ""
            }
          ];
        } else {
          this.useType = "2";
          this.couponApplyGoodsInsertDTOS = res.data.couponApplyGoods;
        }

        //console.log(res.data.couponApplyClassifies);
      });
    },
    //商品二级分类
    getSubClassifyList() {
      this.$http({
        url: `/hssgoodsadmin/serviceClassify/getSubClassifyList`,
        method: "GET"
      }).then(res => {
        this.classifyList = res.data;
        // //console.log("商品二级分类,,,,,,", res);
      });
    },

    //商品工艺类型列表
    getCraftList() {
      this.$http({
        url: `/hssgoodsadmin/serviceGoodsInfo/getCraftList`,
        method: "GET"
      }).then(res => {
        this.craftList = res.data;
        // //console.log("商品二级分类,,,,,,", res);
      });
    },
    getList() {
      //处理优惠券适用范围

      const listObj = {};
      const getListS = (data = []) => {
        data.forEach(item => {
          const { cityCode, cityName, areaCode, areaName } = item;
          if ("cityCode" in item) {
            listObj[cityCode] = cityName;
          }
          if ("areaCode" in item) {
            listObj[areaCode] = areaName;
          }
          if (Array.isArray(item.areas) && item.areas.length) {
            getListS(item.areas);
          }
        });
      };
      getListS(this.cityList);
      const result = this.couponApplyAreaInsertDTOS.map(item => {
        const { businessAreaCode, cityCode } = item;
        return {
          cityCode,
          cityName: listObj[cityCode],
          businessAreaCode,
          businessAreaName: listObj[businessAreaCode]
        };
      });

      let couponApplyAreaInsertDTOS = result;
      let couponApplyClassifyInsertDTOS =
        this.useType == 1 ? this.couponApplyClassifyInsertDTOS : [];
      let couponApplyGoodsInsertDTOS =
        this.useType == 2 ? this.couponApplyGoodsInsertDTOS : [];
      if (this.couponNo === "") {
        this.$http({
          url: "/couponadmin/v1/couponTemplate/insertCouponTemplate",
          method: "POST",
          data: {
            adaptableProductType: 1,
            couponApplyAreaInsertDTOS,
            couponApplyClassifyInsertDTOS,
            couponApplyGoodsInsertDTOS,
            couponNo: "",
            description: this.form.description,
            couponTitle: this.form.couponTitle,
            discountAmount: this.form.discountAmount,
            effectiveEndTime:
              this.form.effectiveEndTime !== ""
                ? this.moment(this.form.effectiveEndTime).format(
                    "yyyy-MM-DD HH:mm:ss"
                  )
                : "",
            effectiveStartTime:
              this.form.effectiveStartTime !== ""
                ? this.moment(this.form.effectiveStartTime).format(
                    "yyyy-MM-DD HH:mm:ss"
                  )
                : "",
            sendQuantity: this.form.sendQuantity,
            thresholdAmount: this.form.thresholdAmount,
            // 1是固定模式 2是循环叠加模式 具体根据后端要求
            useConditions: this.useConditions,
            // 1是分类使用  2是按单个商品
            useType: this.useType
          }
        })
          .then(res => {
            if (res.success == 1) {
              this.$message.success("添加成功");
              //清空

              (this.text = ""),
                (this.useType = "1"),
                (this.useConditions = "1"),
                (this.form = {
                  // 描述
                  description: "",
                  // 名称
                  couponTitle: "",
                  // 活动区域
                  discountAmount: "",
                  thresholdAmount: "",
                  sendQuantity: "",
                  // 日期时间
                  effectiveStartTime: "",
                  effectiveEndTime: ""
                }),
                (this.couponApplyClassifyInsertDTOS = [
                  {
                    classifyCode: "",
                    crafCode: "",
                    subClassifyCode: ""
                  }
                ]),
                (this.couponApplyGoodsInsertDTOS = [
                  {
                    crafCode: "",
                    goodsCode: ""
                  }
                ]),
                (this.couponApplyAreaInsertDTOS = [
                  {
                    businessAreaCode: "",
                    cityCode: ""
                  }
                ]),
                (this.radio = "1"),
                (this.textarea = "");
            }
          })
          .catch(() => {
            this.$message.error("添加失败");
          });
      } else {
        this.$http({
          url: "/couponadmin/v1/couponTemplate/updateCouponTemplate",
          method: "POST",
          data: {
            adaptableProductType: 1,
            couponApplyAreaInsertDTOS,
            couponApplyClassifyInsertDTOS,
            couponApplyGoodsInsertDTOS,
            couponNo: this.couponNo,
            description: this.form.description,
            couponTitle: this.form.couponTitle,
            discountAmount: this.form.discountAmount,
            effectiveEndTime:
              this.form.effectiveEndTime !== ""
                ? this.moment(this.form.effectiveEndTime).format(
                    "yyyy-MM-DD HH:mm:ss"
                  )
                : "",
            effectiveStartTime:
              this.form.effectiveStartTime !== ""
                ? this.moment(this.form.effectiveStartTime).format(
                    "yyyy-MM-DD HH:mm:ss"
                  )
                : "",
            sendQuantity: this.form.sendQuantity,
            thresholdAmount: this.form.thresholdAmount,
            // 1是固定模式 2是循环叠加模式 具体根据后端要求
            useConditions: this.useConditions,
            // 1是分类使用  2是按单个商品
            useType: this.useType
          }
        })
          .then(res => {
            if (res.success == 1) {
              this.$message.success("修改成功");

              this.$router.push({
                path: "/discounts"
              });
              //清空

              (this.useType = "1"),
                (this.useConditions = "1"),
                (this.text = ""),
                (this.form = {
                  // 描述
                  description: "",
                  // 名称
                  couponTitle: "",
                  // 活动区域
                  discountAmount: "",
                  thresholdAmount: "",
                  sendQuantity: "",
                  // 日期时间
                  effectiveStartTime: "",
                  effectiveEndTime: ""
                }),
                (this.couponApplyClassifyInsertDTOS = [
                  {
                    classifyCode: "",
                    crafCode: "",
                    subClassifyCode: ""
                  }
                ]),
                (this.couponApplyGoodsInsertDTOS = [
                  {
                    crafCode: "",
                    goodsCode: ""
                  }
                ]),
                (this.couponApplyAreaInsertDTOS = [
                  {
                    businessAreaCode: "",
                    cityCode: ""
                  }
                ]),
                (this.radio = "1"),
                (this.textarea = "");
            }
          })
          .catch(() => {
            this.$message.error("修改失败");
          });
      }
    }
  }
};
</script>
<style scoped lang="scss">
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.entirety {
  width: 95%;
  margin-left: 10px;
  border: 7px solid #fafafa;
  border-radius: 10px;
  .basic {
    font-size: 18px;
    font-weight: 900;
    margin-top: 2%;
    margin-left: 1%;
  }
}
.overall {
  margin-left: 5%;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 3%;
  .left {
    width: 20%;
    height: auto;
  }
  .right {
    width: 80%;
    height: auto;
  }
}
.select {
  width: 85%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}
.selects {
  width: 85%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}
</style>
